<template>
	<view>
		<view class="padding text-center">
			<view class="padding-lr bg-white margin-top">
				<view class="solid-bottom padding">
					<text class="text-black text-bold">健康助手</text>
				</view>
				<view class="padding">{{username}}您好！</view>
			</view>
		</view>

		<view class="padding">
			<navigator class="cu-btn block bg-blue margin-tb-sm lg" url="../user/user_setting" disabled type="">个人设置</navigator>
		</view>

		<view class="margin-lr" v-if="myGroupList.length">
			<view class="cu-bar bg-white solid-bottom margin-top">
				<view class="action">
					<text class="cuIcon-circlefill text-orange"></text> 我管理的团体
				</view>
			</view>
			<view class="cu-list menu" :class="[menuBorder?'sm-border':'',menuCard?'card-menu margin-top':'']">
				<view class="cu-item flex justify-between" :class="menuArrow?'arrow':''"
					v-for="(myGroupListVal, myGroupListIdx) in myGroupList"
					:key="myGroupListIdx">
					<view class="content">
						<view class="action">
							<text class="cuIcon-title text-orange"></text>
							<navigator :url="'../group/group_detail?group_id='+myGroupListVal._id">{{myGroupListVal.name}}</navigator>
							<!-- <view>{{myGroupListVal.name}}</view> -->
						</view>
					</view>
					<view class="content">
						<button class="cu-btn margin-right" @click="modifyGroup(myGroupListVal._id)">修改</button>
						<button class="cu-btn margin-right" @click="deleteGroup(myGroupListVal._id,myGroupListIdx)">删除</button>
					</view>
				</view>
			</view>
		</view>

		<view class="padding">
			<navigator class="cu-btn block bg-blue margin-tb-sm lg" url="../group/create_group" disabled type="">创建团体</navigator>
		</view>

		<view class="padding">
			<navigator class="cu-btn block bg-blue margin-tb-sm lg" url="../template/my_template" disabled type="">我的模板</navigator>
		</view>

		<view class="padding">
			<navigator class="cu-btn block bg-blue margin-tb-sm lg" url="../index/about" disabled type="">关于</navigator>
		</view>

		<button type="default" class="logOutBtn" @click="logout">退出登录</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: "",

				account_id: '',
				myGroupList: [],

				menuBorder: false,
				menuArrow: false,
				menuCard: false,
			};
		},
		onShow() {
			this.getUserInfo();

			this.account_id = uni.getStorageSync("account_id");
			if (!this.account_id) {
				// uni.navigateTo({
				// 	url: "/pages/user/user_login"
				// });
			} else {
				this.getMyGroupList();
			}
		},
		methods: {
			// MenuBorder(e) {
			// 	this.menuBorder = e.detail.value
			// },
			// MenuArrow(e) {
			// 	this.menuArrow = e.detail.value
			// },
			// MenuCard(e) {
			// 	this.menuCard = e.detail.value
			// },
			getMyGroupList() {
				uniCloud.callFunction({
					name: "ha_get_group",
					data: {
						type: 0,
						account_id: this.account_id
					},
					success: ({result}) => {
						// console.log(result)
						this.myGroupList = result.data;
					},
					fail() {
						uni.showToast({
							icon: 'none',
							title: '网络异常，请稍后重试！'
						});
					}
				});
			},
			logout() {
				//用户退出，清楚缓存信息
				uni.removeStorageSync("token");
				uni.removeStorageSync("account_id");

				uni.navigateTo({
					url: "/pages/user/user_login"
				});
			},
			getUserInfo() {
				// console.log("getUserInfo begin");
				uni.showLoading({
					title: "加载中..."
				});

				let token = uni.getStorageSync("token");

				if (token) {
					uniCloud
						.callFunction({
							name: "validateToken",
							data: {
								token: uni.getStorageSync("token")
							}
						})
						.then(res => {
							// console.log("validateToken", res.result.data);
							try {
								const {
									username
								} = res.result.data;
								this.username = username;
							} catch (e) {
								throw new Error("参数错误请重新登录!");
							}
							uni.hideLoading();
						})
						.catch(err => {
							uni.hideLoading();
							uni.showModal({
								content: "请求云函数发生错误!\n" + err.message,
								showCancel: false
							});

							// 清除缓存并跳转
							uni.removeStorageSync("token");
							uni.removeStorageSync("account_id");
							uni.navigateTo({
								url: '/pages/user/user_login'
							});
						});
				} else {
					//    发布时打开
					uni.navigateTo({
						url: "../user/user_login"
					});
				}
			},
			modifyGroup(group_id) {
				uni.navigateTo({url: `/pages/group/modify_group?group_id=${group_id}`});
			},
			deleteGroup(group_id,index) {
				uni.showModal({ content: '确认删除吗？', success: (res) => { if (res.confirm) {
					// console.log(group_id);
					let token = uni.getStorageSync("token");

					if (token) {
						uniCloud.callFunction({
							name: "ha_del_group",
							data: {
								token,
								group_id
							},
							success: ({result}) => {
								// console.log(result);

								if ( result.status === 0 ) {
									uni.showToast({
										title: `${result.msg || "删除成功！"}`,
										duration: 1000
									});
									// location.reload();
									this.myGroupList.splice(index, 1);
								} else {
									uni.showModal({
										content: `${result.msg || "网络异常，请稍后重试！"}`,
										showCancel: false,
										complete: function () {
											uni.navigateTo({url: "/pages/user/user_login"});
										}
									});
								}
							},
							fail() {
								uni.showToast({
									icon: 'none',
									title: '网络异常，请稍后重试！'
								});
							}
						});
					} else {
						uni.navigateTo({url: "/pages/user/user_login"});
					}
				}}});
			}
		}
	};
</script>

<style>
	.page {
		height: 100Vh;
		width: 100vw;
	}

	.page.show {
		overflow: hidden;
	}

	.logOutBtn {
		flex: 1;
		width: 90%;
		margin-top: 20upx;
	}

</style>
